<template>
  <div class="index-box">
    <div class="contetn_left">
      <ItemWrap class="contetn_left" title="算力资源统计">
        <left-content></left-content>
      </ItemWrap>
    </div>
    <div class="contetn_center">
      <ItemWrap class="contetn_right_top contetn_lr-item1" style="height: 100%" title="算力分布">
        <CenterMap></CenterMap>
      </ItemWrap>
    </div>
    <div class="contetn_right">
      <ItemWrap class="contetn_right_top contetn_lr-item1" title="用户统计">
        <right-top-content></right-top-content>
      </ItemWrap>
      <ItemWrap class="contetn_right_bottom contetn_lr-item2" title="算力交易">
        <right-bottom-content></right-bottom-content>
      </ItemWrap>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, onUnmounted, computed } from "vue";
import ItemWrap from "@/components/item-wrap";
import LeftContent from "./components/leftContent.vue";
import rightBottomContent from "./components/rightBottomContent.vue";
import rightTopContent from "./components/rightTopContent.vue";
// import CenterMap from "./components/center-map.vue";
import CenterMap from "./components/center-map.vue"

const message = ref(null)
onMounted(() => {
  window.addEventListener("message", handleMessage);

  // iframe && iframe.addEventListener('load', function() {
  //   const message = JSON.parse(iframe.contentWindow.name);
  //   console.log("收到子页面的消息：", message);
  // });

})
onUnmounted(() => { 
  // 移除监听器
  window.removeEventListener("message", handleMessage);
})
const curCapital = computed(() => {
  return sessionStorage.getItem("curCapital")
})
const handleMessage = (event:any) => {
      // 阻止react-devtools消息循环
      if (event.data.source === "react-devtools-content-script") {
        return;
      }
      // 接收消息
      if(event.data?.name && event.data?.hashrate) {
        message.value = event.data;
      }
    }

</script>
<style scoped lang="scss">
.index-box {
  width: 100%;
  display: flex;
  height: calc(100% - 64px);
  justify-content: space-between;
}
//左边 右边 结构一样
.contetn_left,
.contetn_right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 560px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.contetn_center {
  flex: 1;
  margin: 0 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.contetn_lr-item1{
  height: calc(40%);
}
.contetn_lr-item2{
  height: calc(60% - 32px);
}
.centermap {
  margin-bottom: 30px;
  flex: 1;
  margin: 0 54px;
  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/assets/img/xieyou.png") no-repeat;
    }
  }

  // .mapwrap {
  //   height: 100%;
  //   width: 100%;
  //   box-sizing: border-box;
  //   position: relative;
  //   .map-out-wrap {
  //     position: relative;
  //     height: 100%;
  //     .message-map {
  //       font-size: 18px;
  //       position: absolute;
  //       bottom: 5%;
  //       left: 10%;
  //       width: 80%;
  //       display: flex;
  //       justify-content: center;
  //       align-items: center;
  //       height: 60px;
  //       padding: 20px;
  //       background-color: #060c18;
  //     }
  //   }
  // }
}
</style>